import React from 'react'
import style from './style.account'
import {info, error, success, Button, Link, Input, TitleBar } from '../../ui-components'
import { connect } from 'react-redux'
import util from '../../util'
import validate from '../../libs/test'
import { findDOMNode } from 'react-dom'

export default
@connect(({ app }) => ({ app }))
class extends React.Component {

	state = {
		edit: false,
		oldPassword: '',
		_newPassword: '',
		newPassword: ''
	}

	handleChange(e, name) {
		this.setState({
			[name]: e.target.value
		})
	}

  componentWillUnmount() {
    // destroy
    validate()
  }

	handleSubmit() {
		const { oldPassword, _newPassword, newPassword } = this.state

    // 检查就密码规则
    if (validate(['password'], { el: findDOMNode(this.refs.oldPassword), value: oldPassword })) return

    // 检查新密码规则
    if (validate(['password'], { el: findDOMNode(this.refs._newPassword), value: _newPassword })) return

    // 比较新旧密码
    if (_newPassword === oldPassword) {
			return error('新密码不能和旧密码重复')
    }

    // 检查二次确认密码
		if (_newPassword !== newPassword) {
			return error('两次输入密码不一致')
		}

		if (oldPassword && newPassword) {
			info('更新中...')
			this.props.updatePassword({
				newPassword,
				oldPassword
			}, () => {
				location.href = '/u'
			})
		}
	}

  handleBlur(name) {
    const type = 'password'
    const value = this.state[name]
    if (util.isNull(value)) return
    validate([type], { el: findDOMNode(this.refs[name]), value })
  }

	render() {
		const { profile } = this.props.app
		const { emailAddress='' } = profile
		const { edit } = this.state
		return (
			<div data-role={'account'}>
				<TitleBar
					label="帐号密码设置"
				/>
				{
					emailAddress?
					<div className={style.list}>
						<div>
              <div className={style.title}>密码设置</div>
							<div>
								<Input label="登录名" disabled value={emailAddress}/>
                {
                  !edit?
                    <div style={{ marginTop: '30px', display: 'flex' }}>
                      <div style={{width:'450px'}}><Input label="密码" type="password" value='xxxxxx' disabled/></div>
                      <Link 
                        style={{ marginLeft: '10px',marginTop:'5px' }}
                        onClick={() => this.setState({ edit: true })}
                        label="更改密码"/>
                    </div>: (
                    <div className={style.updatePassword}>
                      <div>
                        <Input 
                          autoFocus
                          ref="oldPassword"
                          onBlur={e => this.handleBlur('oldPassword')}
                          onChange={e => this.handleChange(e, 'oldPassword')}
                          value={this.state.oldPassword}
                          type="password" 
                          label="旧密码"/>
                        <Input 
                          ref="_newPassword"
                          onChange={e => this.handleChange(e, '_newPassword')}
                          onBlur={e => this.handleBlur('_newPassword')}
                          value={this.state._newPassword}
                          label="新密码" 
                          type="password"/>
                        <Input 
                          ref="newPassword"
                          onBlur={e => this.handleBlur('newPassword')}
                          onChange={e => this.handleChange(e, 'newPassword')}
                          value={this.state.newPassword}
                          label="确认密码" 
                          type="password"/>
                      </div>
                    </div>
                  )
                }
							</div>
              {
                edit? 
                <Button 
                  onClick={::this.handleSubmit}
                  label="更新" 
                  className={style.button}/>: null
              }
						</div>
						{
						}
					</div>: null
				}
			</div>
		)
	}
}
